<template>
  <div>
      <div class="flex">
          <el-radio-group v-model="type" size="large" @change="pieChange">
              <el-radio-button label="sale_">销量</el-radio-button>
              <el-radio-button label="_money">销售额</el-radio-button>
          </el-radio-group>

          <el-select v-model="day" class="m-2" placeholder="Select" size="large" @change="pieChange">
              <el-option label="昨天" value="yesterday" />
              <el-option label="今天" value="today" />
              <el-option label="前3天" value="three_days" />
              <el-option label="前7天" value="seven_days" />
              <el-option label="前14天" value="fourteen_days" />
              <el-option label="前1个月" value="thirty_days" />
              <el-option label="前2个月" value="sixty_days" />
          </el-select>
      </div>
      <div class="pie" id="pie" style="height: 400px"></div>
      <div class="map" id="map" style="height: 800px"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
import { statApi } from './api';
import china from "@/json/china.json";
type EChartsOption = echarts.EChartsOption
type dayEmnu = "sixty_days" | "thirty_days" | "fourteen_days" | "seven_days" | "three_days" | "today" | "yesterday";
var option: EChartsOption;
var ChartDom: echarts.ECharts;
var mapChart: echarts.ECharts;
let data: any[];
let pieData: SalePie[] = [];
let mapData: SaleMap[] = [];
// 数据类型
const type = ref<"sale_" | "_money">("sale_")
// 天数
const day = ref<dayEmnu>("yesterday")
const pieChange = () => {
  // console.log(type.value, day.value);
  const key = type.value === "sale_" ? type.value + day.value : day.value + type.value;
  data = pieData.map(item => ({
      name: item.name,
      value: item[key],
  }));

  (option.series as echarts.SeriesOption[])[0].data = data;
  ChartDom.setOption(option);
}
onMounted(() => {
  // 饼图初始化实例
  ChartDom = echarts.init(document.getElementById('pie')!);


  // 地图初始化实例
  var mapChart = echarts.init(document.getElementById("map")!);
  // 注册地图
  echarts.registerMap("china", china as any);



  statApi().then((res) => {
    //   console.log(res.data);
      // 饼图得到的数据（data默认值）传外部是以为外部需要
      data = res.data.salePie.map(item => ({
          name: item.name,
          value: item.sale_yesterday,
      }))
      pieData = res.data.salePie
      mapData = res.data.saleMap
      // 指定图表的配置项和数据



      Pie()

      // 不传外部是以为这个数据外部用不到
      Map(mapChart)


  })







});
// 饼图数据函数
const Pie = () => {
  option = {
      // 提示组件
      tooltip: {
          trigger: 'item',
          backgroundColor: "rgba(0,0,0,0.5)",
          textStyle: {
              color: "rgb(225,225,225)"
          },
          formatter: '{b}:{c}({d})',
      },
      legend: {
          orient: 'vertical',
          // left: 'left'
          right: "right",
          height: 100,
      },
      series: [
          {
              // name: 'Access From',
              type: 'pie',
              label: {
                  color: "inherit",
                  // backgroundColor: "rgba(0,225,225,0.5)"
              },
              radius: ['40%', '70%'],
              data,

          }
      ]
  };

  // 使用刚指定的配置项和数据显示图表。
  option && ChartDom.setOption(option);
}



// 地图的数据
const Map = (mapChart: echarts.ECharts) => {

  const datas = mapData.map(item => ({
      name: item.areaName,
      value: item.saleNum,
  }))
  // 地图具体数据
  mapChart.setOption({
      title: {
          text: "全国销量分布图",
          left: "center"
      },
      tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.5)",
          textStyle: {
              color: "rgb(225,225,225)"
          },
          formatter: "{b}<br/>销量: {c}",
      },
      label: {
          normal: {
              textStyle: {
                  title: {
                      textStyle: {
                          width: 0
                      }
                  }
                  // fontSize: 0,
                  // fontWeight: 'bold',
                  // color: 'red'
              }
          }
      },
      // geo: {
      //     itemStyle: {
      //         normal: {
      //             // areaColor: '#000',
      //             borderWidth: 0, //设置外层边框
      //             // borderColor:'#f8911b',
      //         },
      //     }
      // },

      visualMap: {
          min: 0,
          max: 1000000,
          // text: ["1000000", "0"],
          realtime: false,
          calculable: true,
          inRange: {
              color: ["#ffffff", "#fd6136", "#a82b29"],
          },
      },
      series: [
          {
              type: "map",
              map: "china",
              data: datas,
              // 缩放
              zoom: 1.1
          },
      ],
      nameMap: {
          "北京市": '北京',
          "天津市": '天津',
          "河北省": '河北',
          "山西省": '山西',
          "内蒙古自治区": '内蒙古',
          "辽宁省": '辽宁',
          "吉林省": '吉林',
          "黑龙江省": '黑龙江',
          "上海市": '上海',
          "江苏省": '江苏',
          "浙江省": '浙江',
          "安徽省": '安徽',
          "福建省": '福建',
          "江西省": '江西',
          "山东省": '山东',
          "河南省": '河南',
          "湖北省": '湖北',
          "湖南省": '湖南',
          "广东省": '广东',
          "广西壮族自治区": '广西',
          "海南省": '海南',
          "重庆市": '重庆',
          "四川省": '四川',
          "贵州省": '贵州',
          "云南省": '云南',
          "西藏自治区": '西藏',
          "陕西省": '陕西',
          "甘肃省": '甘肃',
          "青海省": '青海',
          "宁夏回族自治区": '宁夏',
          "新疆维吾尔自治区": '新疆',
          "台湾省": '台湾',
          "香港特别行政区": '香港',
          "澳门特别行政区": '澳门',
          // "南海诸岛": '',
      }

  })
}

</script>

<style scoped>
.flex{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}
</style>